import React, { useRef, useEffect } from 'react';
import { Button } from 'antd';

import { withMenu } from '~/components/Menu';
import Foot from '~/components/Foot';

import { XmlModel } from '~/utils/const';

import Properties from '~/components/Properties';

import useBpmn from '~/utils/useBpmn-edit';

const Edit = (props) => {
  const { start, loadXml, print, download, redo, undo, setForm, simulate } = useBpmn();

  useEffect(() => {
    start('#canvas');
    loadXml(XmlModel);
  }, []);

  return (
    <div className="page-bpmn-model">
      <div className="page-left bjs-canvas" id="canvas"></div>
      <Foot onImport={loadXml} print={print} download={download} redo={redo} undo={undo} setForm={setForm} simulate={simulate}/>
      <div className="page-right" id="properties-panel">
      </div>
    </div>
  );
};

export default withMenu(Edit);
